<template>
    <view class="input-model" @click="textareaBlur">
        <!-- 抽屉栏 -->
        <view class="emoji-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard" @click.stop>
            <!-- 表情 -->
            <swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
                <swiper-item v-for="(page,pid) in emojiList" :key="pid">
                    <view v-for="(em,eid) in page" :key="eid" @click.stop="addEmoji(em)">
                        <image mode="widthFix" :src="'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/emoji/'+em.url"></image>
                    </view>
                </swiper-item>
            </swiper>
            <!-- 更多功能 相册-拍照-@用户 -->
            <view class="more-layer" :class="{hidden:hideMore}" >
                <view class="list" >
                    <view class="box" v-if="showPicture" @click.stop="chooseImage"><view class="icon tupian2"></view></view>
                    <view class="box" v-if="showCamera" @click.stop="camera"><view class="icon paizhao"></view></view>
                    <view class="box" @click.stop="aitUsers"><view class="icon"><img src="/static/img/post-@.png"/></view></view>
<!--                                        <view class="box" @tap="handRedEnvelopes"><view class="icon hongbao"></view></view>-->
                </view>
            </view>
        </view>
        <!-- 底部输入栏 -->
        <view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard" @click.stop>
            <!-- H5下不能录音，输入栏布局改动一下 -->
            <!-- #ifndef H5 -->
<!--            <view class="voice">-->
<!--                <view class="icon" :class="isVoice?'jianpan':'yuyin'" @tap="switchVoice"></view>-->
<!--                <view class="icon jianpan" ></view>-->
<!--            </view>-->
            <!-- #endif -->
            <!-- #ifdef H5 -->
<!--            <view class="more" @tap="showMore">-->
<!--                <view class="icon add"></view>-->
<!--            </view>-->
            <!-- #endif -->
            <view class="textbox">
<!--                <view class="voice-mode" :class="[isVoice?'':'hidden',recording?'recording':'']" @touchstart="voiceBegin" @touchmove.stop.prevent="voiceIng" @touchend="voiceEnd" @touchcancel="voiceCancel">{{voiceTis}}</view>-->
<!--                <view class="text-mode"  :class="isVoice?'hidden':''">-->
                <view class="text-mode" >
                    <view class="box">
                        <textarea :show-confirm-bar="false" fixed auto-height="true" auto-focus="true" cursor-spacing="35rpx" v-model="textMsg" @focus="textareaFocus"/>
<!--                        <input @focus="textareaFocus" v-model="textMsg"/>-->
                    </view>
                    <view class="em">
                        <view class="icon biaoqing" @click.stop="chooseEmoji"></view>
                    </view>
                </view>
            </view>
            <!-- #ifndef H5 -->
            <view class="more" v-if="addFlag">
<!--                <view class="icon add" @click.stop="showMore"></view>-->
            </view>
            <!-- #endif -->
<!--            <view class="send" :class="isVoice?'hidden':''" @tap="sendText">-->
            <view class="send" @click.stop="userComments" >
                <view class="btn1">提交</view>
            </view>
<!--            <view class="send" @click.stop="textareaBlur" v-if="textMsg == ''">-->
<!--                <view class="btn2">取消</view>-->
<!--            </view>-->
        </view>

<!--        覆盖页面-->
        <view class="ait-users-list" @click.stop v-if="AitShow">
            <view class="ait-list-header">
                <view class="ait-header-left" @click="offAitUsersList">取消</view>
                <view class="ait-header-center" v-if="searchShow">用户列表</view>
                <view class="ait-header-right" v-if="searchShow" @click="searchShow=false"><icon class="weui-icon-search_in-box" type="search" size="20"></icon></view>
                <view class="ait-header-search" v-if="!searchShow">
                    <input type="text" placeholder="搜索" auto-focus/>
                </view>
            </view>
            <view class="ait-list-item">
                <view class="ait-user-item" v-for="item in AitUserList" :key="item.id">
                    <view class="ait-users-head"><img :src="item.basicUserInfo.photo_url"/></view>
                    <view class="ait-users-name">{{item.basicUserInfo.nickname}}</view>
                </view>

            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name: "indexput",
        data(){
            return{
                //@窗口显影
                AitShow: false,
                //搜索输入框显隐
                searchShow:true,
                // foucsType:false,
                //文字消息
                textMsg:'',
                putInfo:this.IndexputInfo,
                //@用户列表
                AitUserList: [],
                // 抽屉参数
                popupLayerClass:'',
                // more参数
                hideMore:true,
                //表情定义
                hideEmoji:true,
                emojiList:[
                    [{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],
                    [{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],
                    [{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],
                    [{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],
                    [{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]
                ],
            }
        },
		props:{
			addFlag:{
				default:true,
				type:Boolean
			},
			showPicture:{
				default:true,
				type:Boolean
			},
			showCamera:{
				default:true,
				type:Boolean
			},
            IndexputInfo:{
			    required: true
            }
		},
        mounted(){
            // this.foucsType = true;
        },
        methods:{
            //点击@用户
            aitUsers(){
                this.AitShow = true;
                this.hideDrawer();
                this.getFollowUserList();
            },
            //获取好友列表
            async getFollowUserList(){
                let params = {
                    page: 1,
                    limit: 10,
                    user_token: uni.getStorageSync('userToken')
                }
                const res = await this.$api.getFollowUserList(params);
                if (res.data.level == 'success'){
                    console.log(res)
                    this.AitUserList = res.data.data;
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
                }
            },
            userComments(){
              if (this.textMsg == ''){
                  uni.showToast({
                      icon:'none',
                      title:"评论不能为空~"
                  })
              } else {
                  this.userComment()
              }
            },
            //评论或回复
            async userComment(){
                this.content = this.textMsg.replace(/\[([^(\]|\[)]*)\]/g,(item, index)=>{
                    for(let i=0;i<this.emojiList.length;i++){
                        let row = this.emojiList[i];
                        for(let j=0;j<row.length;j++){
                            let EM = row[j];
                            if(EM.alt==item){
                                let onlinePath = 'https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/emoji/'
                                let imgstr = "<img style='width:40rpx;height:40rpx;display: inline-block;vertical-align: top;' src='"+onlinePath+EM.url+"'>";
                                return imgstr;
                            }
                        }
                    }
                })
                let params = {
                    user_token: uni.getStorageSync('userToken'),
                    post_article_id: this.putInfo.post_article_id,
                    content: this.content,
                    type: this.putInfo.type,
                    user_id: this.putInfo.user_id,
                    comment_id: this.putInfo.comment_id
                }
                const  res = await this.$api.userComment(params);
                if (res.data.level == 'success'){
                    uni.showToast({
                        icon:'success',
                        title:res.data.message
                    })
                    this.textMsg = "";
                    this.content = "";
                    this.$parent.inputShow = false;
					this.$emit('getComment',res.data.data);//个人主页获取评论
                    this.hideDrawer();
					if(this.$parent.onWXshow){
						this.$parent.onWXshow()
					}
                    
                } else {
                    uni.showToast({
                        icon:'none',
                        title:res.data.message
                    })
					if(res.data.data=='no_login'){
						uni.navigateTo({
							url:'/pages/login/login'
						})
					}else if(res.data.data=='no_binding'){
						uni.navigateTo({
							url:'/pages/login/register/register'
						})
					}
                }
            },
            //取消选择用户
            offAitUsersList(){
                if (this.searchShow == false){
                    this.searchShow = true;
                } else {
                    this.AitShow = false;
                }
            },
            //获取焦点，如果不是选表情ing,则关闭抽屉
            textareaFocus(){
                if(this.popupLayerClass=='showLayer' && this.hideMore == false){
                    this.hideDrawer();
                }
            },
            textareaBlur(){
              // this.foucsType = false;
              this.hideDrawer();
              this.$parent.inputShow = false;
              this.$parent.inputShows = true;
            },
            // 选择图片发送
            chooseImage(){
                this.getImage('album');
            },
            //拍照发送
            camera(){
                this.getImage('camera');
            },
            //选照片 or 拍照
            getImage(type){
                this.hideDrawer();
                uni.chooseImage({
                    sourceType:[type],
                    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                    success: (res)=>{
                        console.log(res)
                        for(let i=0;i<res.tempFilePaths.length;i++){
                            uni.getImageInfo({
                                src: res.tempFilePaths[i],
                                success: (image)=>{
                                    let msg = {url:res.tempFilePaths[i],w:image.width,h:image.height};
                                    console.log(msg)
                                }
                            });
                        }
                    }
                });
            },
            //更多功能(点击+弹出)
            showMore(){
                this.hideEmoji = true;
                if(this.hideMore){
                    this.hideMore = false;
                    this.openDrawer();
                }else{
                    this.hideDrawer();
                }
            },
            // 打开抽屉
            openDrawer(){
                this.popupLayerClass = 'showLayer';
            },
            // 隐藏抽屉
            hideDrawer(){
                this.popupLayerClass = '';
                this.hideMore = true;
                this.hideEmoji = true;
            },
            // 选择表情
            chooseEmoji(){
                this.hideMore = true;
                if(this.hideEmoji){
                    this.hideEmoji = false;
                    this.openDrawer();
                }else{
                    this.hideDrawer();
                }
            },
            //添加表情
            addEmoji(em){
                this.textMsg+=em.alt;
            },

            discard(){
                return;
            }
        },
        watch:{
            IndexputInfo(newValue){
                this.putInfo = newValue;
            },
            putInfo(newValue, oldValue){
                this.$emit('updata:IndexputInfo',newValue)
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "../../../static/scss/inputstyle";
</style>